<template>
  <div>
    <div>
      <el-table :data="this.table_data" border style="width: 100%">
        <el-table-column type="selection" v-if="table_config.checkbox" align="center"> </el-table-column>
        <template v-for="(item, i) in this.table_config.thead">
          <!-- 回调 -->
          <el-table-column v-if="item.type === 'function'" :key="item.prop" :prop="item.prop" :label="item.label" align="center">
            <template slot-scope="scope">
              <span>{{ item.callback && item.callback(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-else-if="item.type === 'operation'" :key="item.prop" :prop="item.prop" :label="item.label" align="center">
            <template slot-scope="scope">
              <el-button type="default" size="mini" @click="edit(scope.row.id)" v-if="item.default && item.default.editBtn">编辑</el-button>
              <el-button type="danger" size="mini" @click="remove(scope.row.id)" v-if="item.default && item.default.deleteBtn">删除</el-button>
              <el-button type="default" size="mini" @click="details(scope.row.id, item.default.detailsBtn.path)" v-if="item.default && item.default.detailsBtn">查看详情</el-button>
            </template>
          </el-table-column>
          <!-- 自定义 -->
          <el-table-column v-else-if="item.type === 'custom'" :key="item.prop" :prop="item.prop" :label="item.label" align="center"> </el-table-column>
          <el-table-column v-else-if="item.type === 'images'" :key="item.prop" :prop="item.prop" :label="item.label" align="center">
            <template slot-scope="scope">
              <img :src="scope.row[item.prop]" alt="" width="80" />
            </template>
          </el-table-column>
          <el-table-column v-else-if="item.type === 'switch'" :key="item.prop" :prop="item.prop" :label="item.label" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.showStatus"></el-switch>
            </template>
          </el-table-column>
          <!-- 普通文本 -->
          <el-table-column v-else :key="item.prop" :prop="item.prop" :label="item.label" align="center"> </el-table-column>
        </template>
      </el-table>
      <div class="mt-4 d-flex justify-content-between">
        <div v-if="this.table_config.batchhandler">
          <el-select v-model="value" placeholder="批量处理">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-button type="primary" size="mini">确定</el-button>
        </div>
        <div class="block" style="float: right" v-if="this.table_config.paging">
          <el-pagination
            :background="true"
            @size-change="this.loadData"
            @current-change="this.loadData"
            :current-page.sync="query.pageNum"
            :page-sizes="[5, 10, 15]"
            :page-size.sync="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { removeProductItem } from '@/utils/utils'
import { fetchRefundPutInList, fetchDetailsData } from '@/api/api'
export default {
  name: 'tableComponent',
  props: {
    config: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      options: [],
      value: '',
      table_config: {
        thead: [],
        checkbox: true,
        url: '',
        format: '',
        paging: false,
        batchhandler: false,
      },
      table_data: [],
      query: {
        pageNum: 1,
        pageSize: 5,
      },
      total: 0,
    }
  },
  methods: {
    initConfig() {
      for (let key in this.config) {
        if (Object.keys(this.table_config).includes(key)) {
          this.table_config[key] = this.config[key]
        }
      }
    },
    // 配置完成后开始读取接口数据
    async loadData() {
      let reqData = {
        url: this.table_config.url,
        data: this.query,
      }
      let res = await fetchRefundPutInList(reqData)
      let { pageNum, pageSize, total, list, totalPage } = res.data
      this.table_data = list
      console.log(list)
      this.total = total
    },
    // 删除
    remove(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          removeProductItem(this.table_data, id)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 编辑
    edit(id) {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: (action) => {
          console.log(id)
          this.$message({
            type: 'info',
            message: `action: ${action}`,
          })
        },
      })
    },
    details(id, path) {
      console.log(path)
      this.$router.push({ path, query: { id } })
    },
  },
  watch: {
    config: {
      handler(newValue) {
        this.initConfig()
      },
      immediate: true,
    },
  },
  created() {
    this.loadData()
  },
}
</script>
<style lang="scss" scoped></style>
